var mydata = null;

var myTimer = null;

Highcharts.setOptions({
    global: {
        useUTC: false
    }
});
var options = {
    chart: {
        type: 'spline',
        renderTo: 'main',
        // animation: Highcharts.svg,
        animation: false,
        marginRight: 20,
        events: {
            load: function () {//load表示的是在图表加载完时触发
                var series = this.series[0],
                    chart = this;

                myTimer = setInterval(function () {//setInterval是设置定时、延时,会不停的调用函数或者表达式
                    $.ajax({
                        url : 'queryOne',
                        type : 'GET',
                        dataType : 'json',
                        async : false, //同步处理后面才能处理新添加的series
                        success: function (resp) {

                            console.log(resp.idd+" "+resp.value)
                            mydata = resp.value;
                            var x = (new Date()).getTime(); // current time
                            // var x = resp.idd; // current time
                            var y = parseFloat(resp.value);
                            //画图。。。。
                            //第三个参数代表删除第一个点
                            series.addPoint([x,y], true, true);
                            //activeLastPointToolip(chart);
                        },
                    });

                }, 20);//每过3s调用一次接口
            }
        }
    },

    title: {
        text: '动态实时数据'
    },

    xAxis: {
        type: 'datetime',
        tickPixelInterval: 100//设置刻度间隔 。该参数对分类坐标轴无效。对于 Y 轴，其默认值是72，X 轴则是 100
    },

    yAxis:{
        title:{
            text:'voltage'
        },
        tickInterval:200,
        max:2800,
        min:1800
    },

    // tooltip: {
    //     backgroundColor: '#ffffff',   // 背景颜色
    //     borderColor: '#ffffff',         // 边框颜色
    //     borderRadius: 10,             // 边框圆角
    //     borderWidth: 0,               // 边框宽度
    //     shadow: false,                 // 是否显示阴影
    //     animation: false,              // 是否启用动画效果
    //     style: {                      // 文字内容相关样式
    //         color: "#ffffff",
    //         fontSize: "1px",
    //         fontFamily: "Courir new"
    //     }
    // },

    //数据点信息
    plotOptions: {
        series: {
            marker: {
                enabled: false, /*数据点是否显示，不显示则为一条线*/
            },
        },
    },

    series: [{
        name: '随机数据',
        data: (function () {
            console.info("mydata=" + mydata);
            // generate an array of random data
            var data = [],
                time = (new Date()).getTime(),
                i;
            for (i = -999; i <= 0; i += 1) {//这里是限制图表中最多显示500个点
                data.push({
                    // x: time,
                    x: time + i*20,
                    y: 2000
                });
            }
            return data;
        }())
    }]
}


$(function () {
    $("#btnConnect").click(function () {
        // 图表初始化函数
        var chart = Highcharts.chart('container', options);
    })
    $("#btnDisConnect").click(function () {
        clearInterval(myTimer)
    })

});

function activeLastPointToolip(chart) {
    var points = chart.series[0].points;
    chart.tooltip.refresh(points[points.length -1]);
}
